<template>
    <div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer group" @click="handleSound">
        <div class="flex items-center justify-between mb-2">
            <span class="font-medium text-gray-800">{{ zh }}</span>
            <button class="text-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity">
                <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M24 17V31" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
                    <path d="M33 11V37" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
                    <path d="M6 17V31" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
                    <path d="M42 18V30" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
                    <path d="M15 4V44" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
                </svg>
            </button>
        </div>
        <p class="text-sm text-gray-500">{{ en }}</p>
    </div>
</template>

<script setup>
import Sound from 'easy-sound';
const props=defineProps({
    zh: String,
    en: String
})
const handleSound = async () => {
    Sound.play(props.en);
    try {
        await navigator.clipboard.writeText(props.en);
        ElNotification({
            title: '复制成功',
            message: `已复制音效名称: ${props.en}`,
            type: 'success',
            duration: 2000
        });
    } catch (err) {
        console.error('复制失败:', err);
    }
}
</script>

